<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="文章" name="first">
      <div>
        <el-col :span="4" v-for="article in articles" :key="article.index">
          <div class="grid-content bg-purple">
            <div>
              <div><a href="javascript:void(0)"><el-image
                @click="findArticleById(article.id)"
                style="width: 200px; height: 200px"
                :src="article.pic"
                fit="fit"></el-image></a></div>
              <div>
                <el-link type="success" @click="findArticleById(article.id)" style="font-size: 20px;" class="outer">{{article.articleName}}</el-link>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </el-tab-pane>


    <el-tab-pane label="视频" name="second">视频</el-tab-pane>
    <div>
      <el-col :span="4" v-for="video in videos" :key="video.index">
        <div class="grid-content bg-purple">
          <div>
            <div><a href="javascript:void(0)"><el-image
              @click="findArticleById(video.id)"
              style="width: 200px; height: 200px"
              :src="video.pic"
              fit="fit"></el-image></a></div>
            <div>
              <el-link type="success" style="font-size: 20px;">{{video.vname}}</el-link>
            </div>
          </div>
        </div>
      </el-col>
    </div>
     </el-tabs>

</template>

<script>
    import axios from "axios";

    export default {
        name: "look",
        data(){
          return{
            articles:[],
            videos:[],
            activeName: 'first',

          }
        },
        methods:{
          look(){
            var word = this.$route.params.word;
            axios.post('http://localhost:8088/user/look',{word:word}).then(res=>{
              if(res.data.code==0){
                this.articles=res.data.data.arts;
                this.videos=res.data.data.vids;
              }
            })
          },
          handleClick(tab, event) {
            console.log(tab, event);
          },
          findArticleById(id){
            this.$router.push({name:"articleInfo",params:{id:id}});
          }

        },
        mounted() {
          this.look();
        }
    }
</script>

<style scoped>

</style>
<style>
  .outer{
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    width: 200px;
  }
</style>
